<template>
  <div>
    <el-table
      ref="multipleTable"
      :data="rolelist"
      tooltip-effect="dark"
      style="width: 360px; margin: 0px auto"
    >
      <el-table-column
        prop="role_id"
        label="角色ID"
        width="120"
        align="center"
      ></el-table-column>
      <el-table-column prop="role_name" label="角色名称" width="120" align="center">
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="success" @click="givePermission(scope.row)" v-model="perbtn" v-if="pershow">分配权限</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "Role",
  data(){
      return{
          rolelist:[],
          perbtn:'16',
          pershow:false
      }
  },
  methods:{
      loacData(){
          this.$axios.get("/role")
          .then(res=>{
              this.rolelist=res.data.data;
              setTimeout(() => {
            //设置默认选中项
            this.login();
          }, 0);
          })
          .cacth(error=>{

          })
      },
      givePermission(item){ 
          this.$router.push("/Permission/"+item.role_id);
      },
      login(){
      var l = sessionStorage.getItem("permission_list");
      var list = l.split(',');
      list.forEach((item)=>{
        if(item == this.perbtn){
          this.pershow = true;
        }
      })
    }
  },
  mounted(){
      this.loacData();
  }
};
</script>